<template>
	<view><img :src="qrImg" alt="" /></view>
</template>

<script setup>
import { showToast, showDialog } from 'vant'
import { onMounted, onUnmounted, ref } from 'vue'
import { getLoginStatusApi, getQrKeyApi, qrCreateApi, qrStatusApi } from '../../api/userApi.js'

// 存储二维码
let qrImg = ref('')

// 定义变量 timer保存定时器
let timer

// 二维码登录功能
async function login() {
	//   定义timestamp保存时间戳
	let timestamp = Date.now()

	const res = await getQrKeyApi()
	
	// console.log(res)

	// 获取生成的 unikey
	const key = res.data.data.unikey

	// 发送 HTTP 请求，生成登录二维码图片
	const res2 = await qrCreateApi(key)

	// console.log(res2)

	// 获取二维码图片
	qrImg.value = res2.data.data.qrimg

	// 轮询二维码扫码状态
	timer = setInterval(async () => {
		// 发送 HTTP 请求，检查二维码扫码状态
		const statusRes = await qrStatusApi(key)
		// console.log(statusRes)

		console.log(statusRes.data.code)

		// 如果返回的状态码为 800，则表示二维码已过期，清除定时器并弹出提示框
		if (statusRes.data.code === 800) {
			// 显示弹窗
			showDialog({
				message: '二维码已经过期，请刷新二维码。',
				theme: 'round-button'
			}).then(() => {
				// on close
			})
			// 清除定时器
			clearInterval(timer)
		} else if (statusRes.data.code === 803) {
			// 发送 HTTP 请求，获取登录状态信息 ，这里会返回cookie
			let resUserInfo = await getLoginStatusApi(statusRes.data.cookie)
			
			localStorage.setItem('cookie', statusRes.data.cookie)
			
			// console.log(resUserInfo);

			// 展示弹窗
			showDialog({
				message: '扫码授权成功！',
				theme: 'round-button'
			}).then(() => {
				
				// 设置登录状态
				localStorage.setItem('loginStatus', true)
				
				// 扫码成功跳转到首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			})
			
			// 清除定时器
			clearInterval(timer)
		}
	}, 3000)
}

let clearTimer

onMounted(() => {
	login()
})

onUnmounted(() => {
	// 清除定时器
	clearInterval(timer)
})

</script>

<style></style>
